<!-- 饼图进度条 -->
<template>
  <div ref="chartRef" style="width: 600px; height: 400px"></div>
</template>
<script setup>
import { onMounted } from "vue";
import { useEcharts } from "../../hook/ useEcharts";

// 使用自定义 Hook
const { chartRef, initChart, updateChart } = useEcharts();

// 定义 Echarts 配置选项
const option = {
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b}: {c}",
  },
  legend: {
    orient: "horizontal",
    bottom: 10,
    left: "center",
    textStyle: {
      color: "#fff",
    },
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    show: false,
  },
  series: [
    {
      name: "数据分类",
      type: "pie",
      radius: ["40%", "60%"],
      center: ["50%", "50%"],
      itemStyle: {
        borderWidth: 1,
        borderColor: "#14263c",
      },
      data: [
        { value: 5000, name: "项目", itemStyle: { color: "#00bfff" } },
        { value: 2000, name: "人员", itemStyle: { color: "#3498db" } },
        { value: 1000, name: "企业", itemStyle: { color: "#f39c12" } },
      ],
      label: {
        normal: {
          show: false,
        },
        emphasis: {
          show: true,
          formatter: "{b}: {c}",
        },
      },
      labelLine: {
        normal: {
          show: true,
          length: 30,
        },
      },
    },
  ],
};

// 模拟更新图表数据
const updateData = () => {
  const newOption = {
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };
  updateChart(newOption);
};

onMounted(() => {
  // 初始化图表
  initChart(option);
});
// 可以在适当的时候调用 updateData 函数来更新图表
</script>
